<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转导航栏</title>
		<style type="text/css">
			*{
				padding:0px;
				margin:0px;
			}
			ul{
				/*perspective: 800px;			显示透视效果(加不加都可以)*/
				list-style-type: none;
			}
			li{
				width: 100px;
				height: 40px;
				float: left;
				transform-style: preserve-3d;						/*显示3d动画效果*/
				/*transform: rotateX(-20deg) rotateY(20deg);*/		/*辅助显示当前的平面效果*/
				transition: all .7s;
			}
			li a{
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				display: inline-block;
				background: pink;
				text-decoration: none;
			}
			a:nth-of-type(2n){									/*选择倍数为2的a标签*/
				transform: rotateX(90deg) translateZ(60px);
				background: #B500FE;
			}
			a:first-child{										/*选择第一个孩子为a的标签*/
				transform: translateZ(20px);
			} 
			.zt{
				width: 300px;
				height: 40px;
				margin: 10px auto;
			}
			li:hover{											/*旋转效果的实现*/
				transform: rotateX(-90deg);
			}
		</style>
	</head>
	<body>
		<div class="zt">
			<ul class="zt_ul">
				<li>
					<a href="#">首页</a>
					<a href="#">index</a>
				</li>
				<li>
					<a href="#">中文</a>
					<a href="#">English</a>
				</li>
				<li>
					<a href="#">电话</a>
					<a href="#">phino</a>
				</li>
			</ul>
		</div>
	</body>
</html>
